<template>
  <div class="messege-box">
    <div class="messege-content">
      <ul :style="{'margin-top': marginTop +'%'}">
        <li v-for="(item,index) in getData">
          <a>
            <!-- <icon :type="'shengyinwu'" :size="'50px'" :color="'#F0FF00'"></icon> -->
            <icon-svg :type="'shengyinwu'" :color="'#F0FF00'"></icon-svg>
            <!-- <span class="iconfont icon-shengyinwu"></span> -->
            {{item.msg}}
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    msgdata: ["String"]
  },
  data() {
    return {
      getData: [
        { msg: "单位1维护施工" },
        { msg: "单位3发生火灾" },
        { msg: "单位4交通拥堵" },
        { msg: "单位2维护施工" },
        { msg: "单位5恢复通行" },
        { msg: "单位7交通拥堵" },
        { msg: "单位6维护施工" },
        { msg: "单位8恢复通行" },
      ],
  		activeIndex: 0
    };
  },
  computed: {
    marginTop() {
      return -this.activeIndex * 6;
    }
  },
  mounted() {
    setInterval(_ => {
      if (this.getData.length - 3 > 0) {
        let vh = this.getData.length - 3;
        if (this.activeIndex < vh) {
          this.activeIndex += 1;
        } else {
          this.activeIndex = 0;
        }
      } else {
        this.activeIndex = 0;
      }
    }, 2000);
  },
  methods: {
    // getData(){
    // 	return
    // }
  }
};
</script>

<style lang="scss">
.messege-box {
  width: 100%;
  height: 100%;
  padding: 15px 15px 25px 15px;
  overflow: hidden;
  .messege-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    // padding-top: 4px;
    ul {
      width: 100%;
      height: 100%;
      position: relative;
      transition: margin-top 0.5s;

      li {
        width: 100%;
        height: 1/3 * 100%;
        padding-bottom: 5px;
        overflow: hidden;
        a {
          width: 100%;
          height: 100%;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #d3d3d3;
          text-decoration: none;
          background: rgba(216, 191, 216, 0.1);
          border-radius: 5px;
          padding-left: 30px;
          position: relative;
          font-size: 1.0rem;
          line-height: 2rem;
          &:before {
            position: absolute;
            box-sizing: border-box;
            margin-left: -22px;
            display: block;
            height: 100%;
            content: "◆";
            font-size: 1.0rem;
            color: #eb8a00;
          }
          i {
            padding-right: 8px;
          }
        }
      }
    }
  }
}
</style>